<template>
  <div class="p-6" style="color: #cfd3dc">
    <el-form label-width="auto" :model="keyInfo" class="flex" ref="ruleFormRef">
      <el-form-item label="快捷键组名称：" prop="name">
        <el-input
          v-model="keyInfo.name"
          style="width: 150px"
          size="large"
          placeholder="请输入快捷键组名称"
        />
      </el-form-item>
      <el-form-item label="" prop="name" class="ml-8">
        <el-button type="primary" size="large">修改</el-button>
      </el-form-item>
    </el-form>

    <div>
      <div
        v-for="(item, index) in data"
        :key="index"
        class="flex items-center mt-4"
      >
        <el-input
          v-model="item.name"
          style="width: 120px"
          disabled
          size="large"
        />
        <el-select
          v-model="item.buyType"
          class="ml-4"
          size="large"
          style="width: 120px"
        >
          <el-option label="买入" :value="1" />
          <el-option label="卖出" :value="2" />
        </el-select>
        <div class="flex items-center ml-4">
          <div>数量：</div>
          <el-select
            v-model="item.count"
            placeholder="Select"
            size="large"
            style="width: 150px"
          >
            <el-option label="持仓数量百分比" :value="1" />
          </el-select>
        </div>
        <el-input
          v-model.number="item.value"
          style="width: 180px"
          size="large"
          class="ml-4"
          placeholder="请输入百分比值"
          ><template #append>%</template></el-input
        >
        <div class="flex items-center ml-4">
          <div>价格：</div>
          <el-select
            v-model="item.count"
            placeholder="Select"
            size="large"
            style="width: 150px"
          >
            <el-option
              v-for="num in 10"
              :label="item.buyType == 1 ? '买' + num : '卖' + num"
              :value="num"
            />
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const keyInfo = ref({
  name: "默认",
});
const data = ref([]);
// 组装数据
for (let index = 0; index < 10; index++) {
  const obj = {};
  obj["name"] = "F" + (index + 1);
  obj["buyType"] = 1;
  obj["count"] = 1;
  obj["value"] = "";
  obj["price"] = 1;
  data.value.push(obj);
}
</script>
<style lang="scss" scoped></style>
